<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		html,body,div{
			margin: 0;
			padding: 0;			
		}
		body{background-color: #232323}
		.slider-outer{
			width: 560px;
			height: 300px;
			margin: 150px auto;
			background-color: #f60;
			position: relative;
		}
		.img-item{
			position: absolute;
			width: 112px;
			height: 100%;
			background-color: #f10;
			transition: all 1.5s;
			/*设置子元素在3D空间中呈现*/
			transform-style: preserve-3d;
		}
		/*让图片可以构成一个有四个面的长方体 start*/
		.img{
			width: 100%;
			height: 100%;
			position: absolute;
			background-size: cover;
		}
		.img:nth-child(1){
			background: url(images/1.png) no-repeat;
			transform: rotateX(0deg) translateZ(150px);
		}
		.img:nth-child(2){
			background: url(images/2.png) no-repeat;
			transform: rotateX(-90deg) translateZ(150px);
		}
		.img:nth-child(3){
			background: url(images/3.png) no-repeat;
			transform: rotateX(-180deg) translateZ(150px);
		}
		.img:nth-child(4){
			background: url(images/4.png) no-repeat;
			transform: rotateX(-270deg) translateZ(150px);
		}
		/*让图片可以构成一个有四个面的长方体 end*/
		.btns{
			position: absolute;
			top: 50%;
			width: 100%;
			height: 70px;
			margin-top: -35px;
		}
		.prev,
		.next{
			width: 70px;
			height: 70px;
			line-height: 70px;
			text-align: center;
			background-color: rgba(0,0,0,.3);
			color: #fff;
			font-size: 30px;
			cursor: pointer;
			position: absolute;
		}
		.prev{
			left: 0;
		}
		.next{
			right: 0;
		}
	</style>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript">
		$(function (){
			var num = 0;
			$("#j_silder_outer .img-item").each(function(index, el) {
				$(this).css({
					"left":$(this).width() * index + "px",
					/*让每个img-item延时一定时间执行动画*/
					"transitionDelay": index * 0.3 + "s"
				});
				$(this).find(".img").css({
					"backgroundPosition": -$(this).width() * index + "px"
				});;
			});

			$(".prev").on("click",function (){
				$("#j_silder_outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");
			});

			$(".next").on("click",function (){
				$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
			});
			
			var timejg=4000;//轮播间隔时间
			var time = setInterval(move,timejg);
			function move(){
				$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
			}
			$('.slider-outer').hover(function(){
				clearInterval(time);
			},function(){
				time = setInterval(move,timejg);
			});


		})
		
		

		
	</script>
</head>
<body>
	<div class="slider-outer" id="j_silder_outer">
		<div class="img-item">
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
		</div>
		<div class="img-item">
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
		</div>
		<div class="img-item">
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
		</div>
		<div class="img-item">
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
		</div>
		<div class="img-item">
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
			<div class="img"></div>
		</div>
		<div class="btns" data-num="0">
			<div class="prev"><</div>
			<div class="next">></div>
		</div>
	</div>
</body>
</html>